<template>
  <div class="box">
    <!-- 导航栏 -->
    <van-nav-bar
      title="购物车"
      left-text="返回"
      fixed
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="content">
      <!-- <h2>购物车</h2> -->
      <!-- 购物车 -->
      <van-checkbox-group
        v-model="result"
        style="margin-bottom: 120px; margin-top: 20px"
      >
        <div v-for="(item, index) in goods" :key="item.id">
          <van-checkbox :name="item"></van-checkbox>
          <van-swipe-cell>
            <van-card
              tag="折扣"
              :price="item.price"
              :desc="item.text"
              :title="item.title"
              :thumb="item.src"
              style="margin: 10px 5px"
            >
              <template #tags>
                <van-tag plain type="success" v-if="item.status === 1"
                  >京东超市</van-tag
                >
                <van-tag plain type="danger">双十一促销</van-tag>
              </template>
              <template #num>
                <van-stepper v-model="item.num" />
              </template>
            </van-card>
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="del(index)"
              />
            </template>
          </van-swipe-cell>
        </div>
      </van-checkbox-group>

      <!-- <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tags>
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </template>
        <template #num>
          <van-stepper v-model="num" />
        </template>
      </van-card> -->

      <!-- 提交订单栏 -->
      <van-submit-bar
        :price="totalPrice"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox v-model="sellAll" @click="handlSellAll"
          >全选</van-checkbox
        >
        <template #tip>
          你的收货地址暂时不支持配送, <span>请修改您的地址</span>
        </template>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from "vant";
export default {
  data() {
    return {
      sellAll: false,
      cartList: [],
      result: [],
      totalPrice: 0,
      num: 0,
      goods: [
        {
          id: 1,
          src: require("@/assets/img/goods/1.webp"),
          text: "CGVS睡衣女士棉春秋季薄款套头家居服可爱少sadsadas女卡通学生居家长袖套装 YS5251 M（建议身高150-156 体重80-100）",
          price: 98.8,
          count: "17",
          title: "学生居家长袖套装",
          status: 1,
          num: 0,
        },
        {
          id: 2,
          src: require("@/assets/img/goods/2.webp"),
          text: "云米（VIOMI）1.5匹智能家电 变频冷暖Space E AI全域风 新一级以旧换新 壁挂式挂机空调KFRd-35GW/Y2QX2-A1",
          price: 3888.8,
          title: "智能家电",
          count: "18万",
          num: 0,
        },
        {
          id: 3,
          src: require("@/assets/img/goods/3.webp"),
          text: "红毛丹罐头 泰双象 2罐 新鲜毛荔枝双象红毛丹糖水果罐头儿时记忆 红毛丹2罐",
          price: 58.88,
          count: "1万+",
          title: "水果罐头",
          status: 1,
          num: 0,
        },
        {
          id: 4,
          src: require("@/assets/img/goods/7.webp"),
          text: "罗技（Logitech）MX Master 3S 鼠标 无线蓝牙鼠标 办公鼠标 右手鼠标  石墨黑  带Logi Bolt无线接收器",
          price: 499.3,
          count: "1万+",
          title: "罗技（Logitech）MX Master 3S 鼠标",
          status: 1,
          num: 0,
        },
      ],
    };
  },
  watch: {
    result: {
      // 监听商品选择状态
      handler(list) {
        if (list.length == this.goods.length) {
          this.sellAll = true;
        } else {
          this.sellAll = false;
        }
        // 调用价格计算函数
        this.comtalPrice();
      },
      deep: true, //深度监听
    },
  },
  methods: {
    onClickLeft() {
      // this.$router.push({ name: "home" });
      window.history.back();
    },
    // 删除商品
    del(index) {
      Dialog.confirm({
        title: "删除商品",
        message: "确认删除此商品吗",
      })
        .then(() => {
          // on confirm
          console.log(index);
          this.goods.splice(index, 1);
        })
        .catch(() => {
          // on cancel
          return;
        });
    },
    // 全选
    handlSellAll() {
      if (this.sellAll) {
        this.result = this.goods;
      } else {
        this.result = [];
      }
    },
    // 计算总价格
    comtalPrice() {
      let totalPrice = 0;
      this.result.map((item) => {
        totalPrice += item.price * item.num;
      });
      this.totalPrice = parseFloat(totalPrice) * 100;
    },
    // 提交商品订单
    onSubmit() {
      if (this.result.length === 0) {
        Toast.fail("请选择商品再提交");
      } else {
        // Toast.success("成功文案");
        const toast = Toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: "正在提交 3 秒",
        });

        let second = 3;
        const timer = setInterval(() => {
          second--;
          if (second) {
            toast.message = `正在提交 ${second} 秒`;
          } else {
            clearInterval(timer);
            // // 手动清除 Toast
            Toast.clear();
            Toast.success(`成功!,您花费了${this.totalPrice / 100}元`);
            this.result = [];
          }
        }, 1000);
      }
    },
  },
};
</script>

<style scoped>
.box {
  padding-top: 46px;
}
.content {
  /* margin-top: 46px; */
}
.van-submit-bar {
  position: fixed;
  bottom: 50px;
}
.van-checkbox-group .van-button--danger {
  width: 100%;
  height: 100%;
}
</style>